/*************************************************
 @author  YouLiping
 @description    自定义分页控件
 @date   2021-09-11
 *************************************************/

(function ($) {
    $.fn.YlpPage = function (options) {
        //默认设置
        var settings = {
            limit: 10,                  //每页显示的条数
            limits: [10, 20, 30, 40, 50],   //每页条数的选择项
            groups: 5,                    //连续出现的页码个数
            count: 0,                   //数据记录总数
            prev: '<',                   //上一页的显示内容
            next: '>',                   //下一页的显示内容
            onChange: function () {
                return false;
            }
        }
        var opts = $.extend({}, settings, options);
        //总页数=记录数/每页记录数 (向上取整)
        opts.totalPages = Math.ceil((opts.count - 0) / opts.limit);
        console.log(opts)
        creatYlpPageContainer($(this), opts);

        createPageItem(1, $(this), opts);

        setYlpPageJumpListener($(this), opts);

    }
    //创建容器
    creatYlpPageContainer = function (obj, opts) {
        var YlpPage = $("<div></div>").attr("id", obj.attr("id") + "_YlpPage").addClass("YlpPage").appendTo(obj);
        //左边显示记录条数
        var YlpPageCountDiv = $("<div></div>").text("共" + opts.count + "条").attr("id", obj.attr("id") + "_YlpPageCount").addClass("YlpPageCountDiv");
        YlpPageCountDiv.appendTo(YlpPage);

        //中间页码容器
        var YlpPageContainerDiv = $("<div></div>").attr("id", obj.attr("id") + "_YlpPageContainer").addClass("YlpPageContrainerDiv");
        YlpPageContainerDiv.appendTo(YlpPage);

        //右边跳转模块
        var YlpPageJumpDiv = $("<div></div>").attr("id", obj.attr("id") + "_YlpPageJump").addClass("YlpPageJumpDiv");
        YlpPageJumpDiv.appendTo(YlpPage);
        //每页显示记录数的选择项
        var YlpPageSelectElm = $("<select></select>");
        for (i = 0; i < opts.limits.length; i++) {
            $("<option value=" + opts.limits[i] + ">" + opts.limits[i] + " 条/页</option>").appendTo(YlpPageSelectElm);
        }
        YlpPageSelectElm.appendTo(YlpPageJumpDiv);
        //输入框
        $("<input type='text'></input>").appendTo(YlpPageJumpDiv);
        //跳转按钮
        $("<button>跳转</button>").appendTo(YlpPageJumpDiv);
    }

    //创建页码
    createPageItem = function (currentPage, obj, opts) {
        //清空原有容器
        var PageContainerElm = $("#" + obj.attr("id") + "_YlpPageContainer");
        PageContainerElm.empty();
        //上一页
        $("<a href='javascript:;'>" + opts.prev + "</a>").addClass("YlpPage-prev").appendTo(PageContainerElm);

        //console.info("总的页数："+opts.totalPages+"  当前页码："+currentPage+" 显示页数为："+opts.groups);
        //总页数 < 显示页数
        if (opts.totalPages <= opts.groups) {
            for (i = 1; i <= opts.totalPages; i++) {
                if (i == currentPage) {
                    $("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").addClass("active").appendTo(PageContainerElm);
                } else {
                    $("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").appendTo(PageContainerElm);
                }
            }
        } else {//总页数 > 显示页数
            //前groups页
            if (currentPage < opts.groups) {
                for (i = 1; i <= opts.groups; i++) {
                    if (i == currentPage) {
                        $("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").addClass("active").appendTo(PageContainerElm);
                    } else {
                        $("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").appendTo(PageContainerElm);
                    }
                }
                if (opts.totalPages - opts.groups > 1) {
                    $("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
                }
                $("<a href='javascript:;'></a>").addClass("YlpPageItem").text(opts.totalPages).appendTo(PageContainerElm);
            }
            //中间页
            else if (currentPage >= opts.groups && currentPage <= (opts.totalPages - opts.groups + 1)) {
                $("<a href='javascript:;'></a>").addClass("YlpPageItem").text(1).appendTo(PageContainerElm);
                $("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);

                for (i = 1; i <= opts.groups; i++) {
                    if ((currentPage + i - Math.ceil(opts.groups / 2)) == currentPage) {
                        $("<a href='javascript:;'></a>").text(currentPage + i - Math.ceil(opts.groups / 2)).addClass("YlpPageItem").addClass("active").appendTo(PageContainerElm);
                    } else {
                        $("<a href='javascript:;'></a>").text(currentPage + i - Math.ceil(opts.groups / 2)).addClass("YlpPageItem").appendTo(PageContainerElm);
                    }
                }
                $("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
                $("<a href='javascript:;'></a>").addClass("YlpPageItem").text(opts.totalPages).appendTo(PageContainerElm);
            }
            //后groups页
            else {
                $("<a href='javascript:;'></a>").addClass("YlpPageItem").text(1).appendTo(PageContainerElm);
                if (opts.totalPages - opts.groups > 1) {
                    $("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
                }
                for (i = opts.totalPages - opts.groups + 1; i <= opts.totalPages; i++) {
                    if (i == currentPage) {
                        $("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").addClass("active").addClass("active").appendTo(PageContainerElm);
                    } else {
                        $("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").appendTo(PageContainerElm);
                    }
                }
            }
        }
        //下一页
        $("<a href='javascript:;'>" + opts.next + "</a>").addClass("YlpPage-next").appendTo(PageContainerElm);

        setYlpPageListener(obj, opts);
    }

    //绑定页码的一些点击事件
    setYlpPageListener = function (obj, opts) {
        //点击上一页
        $("#" + obj.attr("id") + "_YlpPageContainer .YlpPage-prev").bind("click", function () {
            console.info("点击上一页");
            var currentPage = $("#" + obj.attr("id") + "_YlpPageContainer .active").text() - 0 - 1;
            if (currentPage >= 1) {
                createPageItem(currentPage, obj, opts);

                if(opts.keyword){
                     get_users_keyword(opts.keyword,currentPage,opts.limit);
                }else{
                  let  datas = get_users(currentPage,opts.limit);
                    render_data(datas.records);
                }


            }
        })

        //点击下一页
        $("#" + obj.attr("id") + "_YlpPageContainer .YlpPage-next").bind("click", function () {
            console.info("点击下一页");
            var currentPage = $("#" + obj.attr("id") + "_YlpPageContainer .active").text() - 0 + 1;


            // 判断是否页数小于 总页数
            if (currentPage <= opts.totalPages) {
                createPageItem(currentPage, obj, opts);

                if(opts.keyword){
                    get_users_keyword(opts.keyword,currentPage,opts.limit);
                }else{
                  let  datas = get_users(currentPage,opts.limit);
                    render_data(datas.records);
                }

            }



        })

        //点击页码
        $("#" + obj.attr("id") + "_YlpPageContainer .YlpPageItem").bind("click", function () {
            console.info("当前点击页为：" + $(this).text());
            var currentPage = $(this).text() - 0;
            createPageItem(currentPage, obj, opts);
            console.log(opts)
            // 当直接点击页码的时候 执行请求，查询页码的数据

            if(opts.keyword){
                 get_users_keyword(opts.keyword,currentPage,opts.limit);
            }else{
                let datas = get_users(currentPage,opts.limit);
                render_data(datas.records);
            }

            // 再将查询到的数据，渲染到页面

        })
    }

    //注意：跳转事件不要放在setYlpPageListener里一起监听，而是全局调用一次即可
    //否则会出现幂次方地调用，运算消耗upupup
    setYlpPageJumpListener = function (obj, opts) {
        //更改每页条数的选择项
        $("#" + obj.attr("id") + "_YlpPageJump select").bind("change", function () {
            //console.info("当前值为："+$(this).val());
            opts.limit = $(this).val() - 0;//更新每页显示条数
            opts.totalPages = Math.ceil((opts.count - 0) / opts.limit);//更新总页数
            createPageItem(1, obj, opts);

            // 当直接点击页码的时候 执行请求，查询页码的数据

            if(opts.keyword){
                 get_users_keyword(opts.keyword,1,opts.limit);
            }else{
              let  datas = get_users(1,opts.limit);
                render_data(datas.records);
            }


            // // 再将查询到的数据，渲染到页面



        })

        //点击跳转按钮
        $("#" + obj.attr("id") + "_YlpPageJump button").bind("click", function () {
            var targetPage = $("#" + obj.attr("id") + "_YlpPageJump input").val();
            //console.info("要跳转的页码为："+targetPage);
            var patt = /^[1-9]\d*$/;
            if (patt.test(targetPage)) {
                if (targetPage < opts.totalPages) {
                    createPageItem(targetPage - 0, obj, opts);

                    // 当直接点击页码的时候 执行请求，查询页码的数据
                    console.log(opts)
                    if(opts.keyword){
                         get_users_keyword(opts.keyword,targetPage,opts.limit);
                    }else{
                        let datas = get_users(targetPage, opts.limit)
                        render_data(datas.records);
                    }


                    // // 再将查询到的数据，渲染到页面


                } else {
                    createPageItem(opts.totalPages, obj, opts);
                    $("#" + obj.attr("id") + "_YlpPageJump input").val(opts.totalPages);

                    console.log("目标页数 > 总页数")
                    // 当直接点击页码的时候 执行请求，查询页码的数据

                    if(opts.keyword){
                        get_users_keyword(opts.keyword,targetPage,opts.limit);
                    }else{
                        let datas = get_users(opts.totalPages, opts.limit);
                        render_data(datas.records);
                    }
                    // // 再将查询到的数据，渲染到页面


                }
            }
        })
    }
})(jQuery);
